<template>
  <div class="view">
    <x-header :left-options="{backText: ''}"
              class="vux-1px-b">用户注册</x-header>
    <div class="content">
      <div class="form">
        <my-input placeholder="请输入手机号"
                  v-model="form.mobile"
                  type="number">
          <i class="account-icon icon"></i>
        </my-input>
        <my-code-input :mobile="form.mobile"
                       v-model="form.yzm" :type="4"></my-code-input>
        <my-input placeholder="请输入密码"
                  type="password"
                  v-model="form.mobile">
          <i class="pwd-icon icon"></i>
        </my-input>
        <my-input v-if="this.$route.query.invitecode"
                  placeholder="请输邀请人手机号"
                  v-model="form.yqm"
                  type="text">
          <i class="yqm-icon icon"></i>
        </my-input>
      </div>
      <div class="bottom">
        <div>
          <check-icon :value.sync="accept"
                      type="plain"></check-icon>
          <span>接受
            <a href="javascript:void(0);"
               @click="gotoHelp('regist', '赞佳乐平台服务协议')">《赞佳乐平台服务协议》</a>
          </span>
        </div>
        <div>
          <button class="submit"
                  @click="submit">提交注册</button>
        </div>
        <div>
          <a @click="$router.back()">已有账号，请直接登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader, CheckIcon } from 'vux'
import myInput from './components/input'
import myCodeInput from './components/codeInput'
import { regist, bind } from '@api' // addCouponOrder
import { mapMutations } from 'vuex'
import { SET_LOADING } from '@store/type'
import Vue from 'vue'
import { Confirm } from 'wc-messagebox'
import 'wc-messagebox/style.css'
Vue.use(Confirm)
export default {
  components: {
    myInput,
    myCodeInput,
    XHeader,
    CheckIcon
  },
  data () {
    return {
      counponid: 'ad0d2b22-4787-4302-a12e-6aba4e1b427c',
      accept: true,
      form: {
        mobile: '',
        password: '',
        yzm: '',
        yqm: '',
        fxyqm: this.$route.query.first_header || ''
      }
    }
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    // 用户注册
    async submit () {
      if (!this.accept) {
        this.$toastText('请先阅读赞佳乐用户服务协议并点击接受！')
        return false
      }
      if (!this.form.mobile || this.form.mobile.length <= 0) {
        this.$toastText('请输入手机号！')
        return false
      }
      if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.form.mobile)) {
        this.$toastText('请输入正确的手机号码！')
        return false
      }
      if (!this.form.yzm || this.form.yzm.length <= 0) {
        this.$toastText('请输入短信验证码！')
        return false
      }
      if (!this.form.yqm || this.form.yqm.length <= 0) {
        if (!confirm('您未输入邀请人号码！确定继续绑定，取消返回填写！')) {
          return false
        }
      } else {
        if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.form.yqm)) {
          this.$toastText('请输入正确的邀请人手机号码！')
          return false
        }
      }
      this.setLoading({
        status: true,
        opacity: 0
      })

      let form = new FormData()
      // form.append('mobile', this.form.mobile)
      // form.append('password', this.form.password)
      // form.append('yzm', this.form.yzm)
      // form.append('yqm', this.form.yqm)
      // form.append('mode', 'pwd')
      // form.append('fxyqm', this.form.fxyqm)
      form.append('mobile', this.form.mobile)
      form.append('yzm', this.form.yzm)
      form.append('openid', this.$utils.storage.get('openId'))
      form.append('type', 'wx')
      form.append('yqm', this.form.yqm)
      // let res = await regist(form)
      let res = await bind(form)
      this.setLoading(false)
      if (res && res.code === 200) {
        // let forms = new FormData()
        // forms.append('mobile', this.form.mobile)
        // forms.append('yzm', this.form.yzm)
        // forms.append('openid', this.$utils.storage.get('openId'))
        // forms.append('type', 'wx')
        // forms.append('yqm', this.form.yqm)
        // this.handBindUser(forms)

        this.$store.dispatch('login', {
          form,
          count: -2
        })

        // 注册新账号赠送一张优惠券
        // let id = this.counponid
        // let formcou = new FormData()
        // formcou.append('coupon_id', id)
        // formcou.append('user_id', res.data.user_id)
        // let rescou = await addCouponOrder(formcou)
        // if (rescou && rescou.code === 200) {
        //   this.$toastText('您已成功领取一张优惠券！')
        // }
      }
    },
    // 绑定微信号
    async handBindUser (form) {
      let res = await bind(form)
      if (res && res.code === 200) {
        console.log(res)
      }
    },
    gotoHelp (id, title) {
      this.$router.push({
        path: '/help/' + id,
        query: { title: title }
      })
    }
  },
  created () {
    if (this.$route.query.invitecode === '000000') {
      this.form.yqm = ''
    } else {
      this.form.yqm = this.$route.query.invitecode
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/pub";

.view {
  background-color: #fff;
}

.form {
  margin-top: 1rem;
  padding: 0 .5rem;
}

.bottom {
  padding: .25rem .5rem;
  div {
    margin-top: .25rem;
    font-size: $default_font_size;
    color: $default_font_color;
  }

  .submit {
    width: 100%;
    height: 1rem;
    background: $active_font_color;
    color: #fff;
    border-radius: .125rem;
    border: 0;
    font-size: $default_font_size;
  }
}
</style>
